<!DOCTYPE html>
<html lang="zh-CN"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{layui/css/layui.css}" media="all">
</head>
<style type="text/css">
    .layui-table-cell {
        height: 100px;
        /*line-height: 28px;*/
        padding: 0 15px;
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        box-sizing: border-box;
        vertical-align: middle;
        text-align: center;
    }

    .layui-table img {
        max-width: 100px;
        max-height: 100px;
        margin-top: 10px;
    }
    .layui-form-item {
        margin-bottom: 15px;
        clear: both;
        *zoom: 1;
        margin-left: -80px;
    }
</style>
<body>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script th:src="@{layui/layui.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/shoppingApi/js/jquery-3.3.1.min.js}"></script>
<script type="application/javascript" th:src="@{/shoppingApi/js/common.js}"></script>
<!--<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>-->
<script th:inline="none">
    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#test'
            , url: '/adminListData'
            , toolbar: '#toolbarDemo'
            , title: '用户数据表'
            , totalRow: true
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'adminId', title: '管理员ID'}
                , {field: 'adminName', title: '管理员名称'}
                , {field: 'realName', title: '真实姓名'}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo'}
            ]]
            , page: true

        });

        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    //删除
                    var adminId = data['adminId'];
                        delAdmin(adminId);
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                var adminId = data['adminId'];
                    editAdmin(adminId);

            } else if (obj.event === 'queryAdmin') {
                var adminId = data['adminId'];
                window.location.href = '/editorAdminById?adminId=' + adminId;
            }
        });

        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选');
                    break;
            }
            ;
        });

        //复选框
        table.on('checkbox(test)', function(obj){
            console.log(obj.checked); //当前是否选中状态
            console.log(obj.data); //选中行的相关数据
            console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
        });

    });

    function Format(datetime, fmt) {
        if (parseInt(datetime) == datetime) {
            if (datetime.length == 10) {
                datetime = parseInt(datetime) * 1000;
            } else if (datetime.length == 13) {
                datetime = parseInt(datetime);
            }
        }
        datetime = new Date(datetime);
        var o = {
            "M+": datetime.getMonth() + 1,                 //月份
            "d+": datetime.getDate(),                    //日
            "h+": datetime.getHours(),                   //小时
            "m+": datetime.getMinutes(),                 //分
            "s+": datetime.getSeconds(),                 //秒
            "q+": Math.floor((datetime.getMonth() + 3) / 3), //季度
            "S": datetime.getMilliseconds()             //毫秒
        };
        if (/(y+)/.test(fmt))
            fmt = fmt.replace(RegExp.$1, (datetime.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt))
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }


    var body;

    function editAdmin(adminId) {
        layer.open({
            type: 2
            , title: '编辑商品'
            , content: '/editorAdminById?adminId=' + adminId
            , area: ['420px', '420px']
            , btn: ['确定', '取消']
            , yes: function (index, layero) {
                body = layer.getChildFrame('body', index); //得到iframe页的body内容
                //保存修改数据
                saveAdminData();
            }
        });
    }

    function saveAdminData() {
        var adminId = body.find('#adminId').val();
        var adminName = body.find('#adminName').val();
        var realName = body.find('#realName').val();
        alert(adminId);
        $.ajax({
            async: false,
            type: 'post',
            url: '/savaEditAdminData',
            data: {
                adminId: adminId,
                adminName: adminName,
                realName: realName
            },
            success: function (res) {
                if (res.msg == '1') {
                    layer.alert("修改成功！");
                } else {
                    layer.alert("修改失败！");
                }
            }
        })
    }

    //删除
    function delAdmin(adminId) {
        $.ajax({
            url: '/delAdmin?adminId=' + adminId,
            success: function (res) {
                if (res.msg) {
                    layer.alert("删除成功！");
                } else {
                    layer.alert("删除失败！");
                }
            }
        })
    }


</script>


</body>

</html>